import {FC,useState,useEffect,useRef} from 'react'
import './Dept.scss'
import {Table, Button, Space, Form, Input,Modal,message} from 'antd';
import type { TableColumnsType } from 'antd';
import api from '@/api/index.ts'
import type {IDept} from "@/types/api.ts";
import {formatDateToChinese} from "@/utils";
import CreateDept from './CreateDept.tsx'
const Dept: FC = () => {
  const [loading, setLoading] = useState<boolean>(false)
  useEffect(() => {
    getDepthData()
  }, [])
  const deptRef = useRef<{
    openModal: (type:string,data?:IDept|{parentId:string}) => void;
  }>(null);
  const [form] = Form.useForm();
  const [data, setData] = useState<IDept[]>([])
  const handleCreate = () => {
    deptRef.current?.openModal('create');
  }

  const getDepthData =async () => {
    setLoading(true)
    const data = await api.getDeptList(form.getFieldsValue());
      setData(data)
    setLoading(false)
  }
  const handleEdit = (record: IDept) => {
    deptRef.current?.openModal('edit',record);
  }
  const handleSubCreate = (id:string) => {
    deptRef.current?.openModal('create',{parentId:id});

  }
  const handleDel = (id: string) => {
    Modal.confirm({
      title: '删除部门',
      content: '确定删除该部门吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        handleDelOk(id);
      },
    });
  }
  const handleDelOk = async (id: string) => {
    await api.deleteDept({ _id: id });
    message.success('删除成功')
    getDepthData();
  };
  const columns: TableColumnsType<IDept> = [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width:'200'
    },
    {
      title: '负责人',
      dataIndex: 'userName',
      key: 'userName',
      width: '150',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '300',
      render:(text)=>{
        return formatDateToChinese(text)
      }
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: '300',
      render:(text)=>{
        return formatDateToChinese(text)
      }
    },
    {
      title: '操作',
      key: 'action',
      width: '200',
      render:(_,record)=>{
        return(
            <Space>
              <Button
                  type="primary"
                  onClick={() => {
                    handleSubCreate(record._id);
                  }}
              >
                新增
              </Button>
              <Button
                  type="primary"
                  onClick={() => {
                    handleEdit(record);
                  }}
              >
                编辑
              </Button>
              <Button
                  danger
                  onClick={() => {
                    handleDel(record._id);
                  }}
              >
                删除
              </Button>
            </Space>
        )
      }
    }
  ];
  const handleReset = () => {
    form.resetFields();
    getDepthData();
  };
  return (
      <div className={'Dept'}>
        <Form className="search-form" layout="inline" form={form}>
          <Form.Item name="deptName" label="部门名称">
            <Input placeholder="请输入部门名称" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" className={'mr10'} onClick={getDepthData}>
              查询
            </Button>
            <Button type="primary" htmlType="submit" onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        <div className="wrap-table">
          <div className="header">
            <div className="title">部门列表</div>
            <div className="action">
              <Button onClick={handleCreate}>新增</Button>
            </div>
          </div>
          <Table
              rowKey="_id"
              columns={columns}
              dataSource={data}
              loading={loading}
          />
        </div>
        <CreateDept  mref={deptRef} update={getDepthData} />
      </div>
  )
}
export default Dept
